<script setup>
    import { ref ,onMounted,reactive} from "vue";
    import Nav from "../../components/nav/index.vue"
    import BackTop from "../../components/backTop/index.vue"
    import AsideNav from "../../components/asideNav/index.vue"
    import Bottom from "../public/bottom/index.vue"
    import {takeGoodsDetail} from "../../../src/api/goods/index.js"
    //关注按钮
    let btncolor = ref("wite");
    let btnmsg = ref("+ 关注");
    let btnhcolor=ref("bisque");
    let flag = true;
    let change = () => {
        flag = !flag;
        if (flag) {
            btncolor.value = "wite";
            btnmsg.value = "+ 关注";
            btnhcolor.value="bisque";
        } else {
            btncolor.value = "wite";
            btnmsg.value = "已关注";
            btnhcolor.value="wite";
        }
    };
    //取商品详情
    const obj=reactive({data:{}})
    const getGoods=async()=>{
        const {data:{data:data}}=await takeGoodsDetail({id:"49f11e24d85cb5343748b7e7c63d7349"})
        obj.data=data
        console.log(obj.data)
    }
    onMounted(()=>{
        getGoods()
    })
    </script>
    <template>
        <Nav></Nav>
        <AsideNav></AsideNav>
        <BackTop></BackTop>
        <div class="toububox">
            <div class="left">
                <div class="c">
                    <div class="im">
                        <img src="./imgs/img4.jpeg" alt="" />
                    </div>
                    <div class="info">
                        <div class="name">我是帅比</div>
                        <div class="postmsg">
                            <img src="./imgs/纸飞机.png" alt="" class="planeimg" />
                            <div class="post">私信他</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="btn">
                    <button class="gzbtn" @click="change">{{ btnmsg }}</button>
                </div>
            </div>
        </div>
        <div class="txtbox">
            <div class="titlebox">
                <div class="title">{{obj.data.goods_name}}</div>
                <div class="price">￥{{obj.data.goods_price}}</div>
            </div>
            <div class="txtsmbox">
                <div class="txt">
                    {{obj.data.content}}
                </div>
            </div>
    
    
            <div class="txtimgbox">
                <img :src="obj.data.goods_coverImgUrl" alt="">
                <img :src="obj.data.goods_imgUrl" alt="" class="txtimg" />
            </div>
        </div>
        <div class="labelbox">
            <div class="stylelabel">
                <svg t="1664438692542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="3554" width="18" height="18">
                    <path
                        d="M867.12685 559.619989l-415.999992-415.999992A52.986666 52.986666 0 0 0 413.413525 127.999998H338.84686a361.70666 361.70666 0 0 1 2.486667 42.666665c0 42.713332-7.266667 83.199998-20.473333 113.999998-5.146667 12-10.746666 21.546666-16.48 29.08A85.286665 85.286665 0 1 1 256.000195 298.666661c6 0 16.573333-9.64 25.646666-30.806666C292.460194 242.619995 298.666861 207.193329 298.666861 170.666663a314.759994 314.759994 0 0 0-2.873333-42.666665H216.206862c2.82-20.533333 7.653333-39.366666 14.146667-54.526666C239.426862 52.306666 250.000195 42.666666 256.000195 42.666666s16.573333 9.64 25.646666 30.806666c6.493333 15.16 11.333333 33.999999 14.146667 54.526666h43.053332c-3.166667-26.559999-9.286666-51.046666-18-71.333332C299.733527 7.333333 271.153528 0 256.000195 0s-43.733332 7.333333-64.859999 56.666666c-8.666666 20.286666-14.82 44.773332-17.999999 71.333332H53.333532a53.393332 53.393332 0 0 0-53.333332 53.333332v360.079993a52.986666 52.986666 0 0 0 15.62 37.713332l415.999992 415.999992a53.333332 53.333332 0 0 0 75.426665 0l360.079993-360.079993a53.399999 53.399999 0 0 0 0-75.426665zM597.333522 1023.99998a21.333333 21.333333 0 0 1-15.086667-36.419999l382.706659-382.706659a10.666666 10.666666 0 0 0 0-15.08L539.580189 164.419997a21.333333 21.333333 0 0 1 30.173333-30.173333l425.373325 425.373325a53.399999 53.399999 0 0 1 0 75.426665l-382.706659 382.706659A21.266666 21.266666 0 0 1 597.333522 1023.99998z"
                        fill="#5C5C66" p-id="3555"></path>
                </svg>
                <div class="style">手机</div>
            </div>
        </div>
        <div class="toolbox">
            <div class="tool">
                <svg t="1664437226777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="2597" width="26" height="26">
                    <path
                        d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
                        p-id="2598"></path>
                    <path
                        d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
                        p-id="2599"></path>
                    <path
                        d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
                        p-id="2600"></path>
                    <path
                        d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
                        p-id="2601"></path>
                </svg>
                <div class="tooltxt">点赞</div>
            </div>
            <div class="tool">
                <svg t="1664439144282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4582" width="26" height="26">
                    <path
                        d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
                        p-id="4583"></path>
                </svg>
                <div class="tooltxt">评论</div>
            </div>
        </div>
        <Bottom></Bottom>
    
    </template>
    <style scoped lang="scss">
        .toububox {
            width: 70%;
            height: 70px;
            margin:0 auto;
            margin-top: 3px;
            background-color: whitesmoke;
            box-shadow: 0px 1px 4px 1px rgb(222,222,222);
            border-radius: 3px;
            position: relative;
    
            .right {
                position: absolute;
                width: 50%;
                height: 70px;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
    
                .btn {
                    .gzbtn {
                        width: 70px;
                        height: 35px;
                        background-color: v-bind(btncolor);
                        border-radius: 30px;
                        border: 1px rgba(255, 115, 0, 0.724) solid;
                        outline: none;
                        color: rgba(255, 115, 0, 0.724);
                        font-size: 12px;
                        font-weight: 600;
                    }
                   
                    .gzbtn:hover {
                        cursor: pointer;
                        background-color: v-bind(btnhcolor);
                    }
                }
            }
    
            .left {
                position: absolute;
                width: 50%;
                height: 70px;
                left: 0;
                justify-content: center;
    
                .c {
                    left: 50%;
                    display: flex;
                    justify-content: center;
                    margin-top:5px;
                    .im {
                        align-self: center;
    
                        img {
                            width: 60px;
                            height: 60px;
                            // margin-top: 15px;
                            border-radius: 50%;
                        }
                    }
    
                    .info {
                        margin-top: 7px;
                        .name {
                            margin-left: 15px;
                            font-family: cursive;
                            font-weight: bolder;
                            font-size: 18px;
                        }
    
                        .postmsg {
                            margin-top: 8px;
                            display: flex;
    
                            .post {
                                font-size: 8px;
                                margin-top: 2px;
                                margin-left: 5px;
                            }
    
                            .planeimg {
                                width: 22px;
                                margin-left: 15px;
                            }
                        }
    
    
                    }
                }
            }
        }
    
        .txtbox {
            background-color: whitesmoke;
            box-shadow: 0px 1px 4px 1px rgb(222,222,222);
            border-radius: 3px;
            width: 70%;
            margin: 10px auto 0 auto;
            padding-bottom: 10px;
            display: flex;
            flex-direction: column;
    
            .titlebox {
                display: flex;
                flex-direction: column;
    
                .title {
                    font-size: 30px;
                    margin-left: 30px;
                    margin-top: 10px;
                    align-self: flex-start;
                }
    
                .price {
                    font-size: 23px;
                    margin-left: 30px;
                    margin-top: 10px;
                    color: tomato;
                    align-self: flex-start;
                }
            }
    
            .txtsmbox {
                margin-top: 10px;
    
                .txt {
                    margin: 15px 30px;
                    text-align: left;
                }
            }
    
    
            .txtimgbox {
                width: 80%;
                background-color: whitesmoke;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
    
                .txtimg {
                    width: 70%;
                    padding-bottom: 5px;
                }
            }
    
        }
    
        .labelbox {
            width: 70%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
    
            .stylelabel {
                padding: 5px 10px;
                margin: 2px 9px;
                border-radius: 13px;
                display: flex;
                align-items: center;
    
                .style {
                    font-size: 13px;
                    margin-left: 5px;
                }
            }
        }
        .toolbox{
            width: 70%;
            margin: 0 auto;
            display: flex;
            .tool{
                margin:10px 20px;
                display: flex;
                align-items: center;
                .tooltxt{
                    margin-left: 5px;
                    font-size: 14px;
                    font-weight: 700;
                }
            }
            .tool:hover{
                cursor: pointer;
                color: royalblue;
            }
        }
    </style>
        